{% extends "admin/base.html" %}

{% block content %}
<div class="card">
    <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
        <h2>{% if page %}{{ page.name }}{% else %}添加静态网页{% endif %}</h2>
        <a href="/admin/static-pages" class="btn btn-secondary">返回列表</a>
    </div>
    <div class="card-body">
        <form action="{{ action }}" method="post" class="form-horizontal">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">页面名称 <span style="color: #e74c3c;">*</span></label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" 
                           value="{{ page.name if page else '' }}" required>
                    <small class="help-block">静态网页的显示名称</small>
                </div>
            </div>
            
            <div class="form-group">
                <label for="directory" class="col-sm-2 control-label">页面目录 <span style="color: #e74c3c;">*</span></label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="directory" name="directory" 
                           value="{{ page.directory if page else '' }}" required>
                    <small class="help-block">用于访问的目录名，将作为URL路径的一部分，必须唯一</small>
                </div>
            </div>

            <div class="form-group">
                <label for="description" class="col-sm-2 control-label">页面描述</label>
                <div class="col-sm-10">
                    <textarea class="form-control" id="description" name="description" rows="4" 
                              placeholder="请输入页面描述">{{ page.description if page else '' }}</textarea>
                    <small class="help-block">对该静态页面的描述信息</small>
                </div>
            </div>
            

            
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary">{% if page %}更新{% else %}添加{% endif %}</button>
                    <a href="/admin/static-pages" class="btn btn-default">取消</a>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 引入静态页面表单相关脚本 -->
<script src="/static/js/admin/static-pages-form.js"></script>

<!-- 表单校验脚本 -->
<script>
(function() {
    var form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(event) {
            // 表单提交校验
            var nameInput = document.getElementById('name');
            var directoryInput = document.getElementById('directory');
            
            if (!nameInput || !nameInput.value.trim()) {
                alert('请输入页面名称');
                if (nameInput) nameInput.focus();
                event.preventDefault();
                return false;
            }
            
            if (!directoryInput || !directoryInput.value.trim()) {
                alert('请输入页面目录');
                if (directoryInput) directoryInput.focus();
                event.preventDefault();
                return false;
            }
            
            return true;
        });
    }
})();
</script>


{% endblock %}